<template>
  <div class="home-box">
    <swiper class="swiper" :options="swiperTopOption" v-if="imgList.length > 0">
      <swiper-slide  v-for="(item, index) in imgList" :key="index">
        <div class="img-box">
          <img :src="item.picturePath" alt=""/>
          <div class="header">
            <p class="tit">元器件选型与技术支持</p>
            <p class="tit1">在线服务平台</p>
            <div class="search">
              <el-select v-model="modelInput" filterable placeholder="请输入型号" :filter-method="filterMethod">
                <template slot="prefix">
                  <el-button icon="el-icon-search" @click="gosearch" size="medium"></el-button>
                </template>
                <el-option
                  v-for="item in partNumSearch"
                  :key="item.id"
                  :label="item.partNumberInfo"
                  :value="item.id">
                </el-option>
                <div v-if="partNumSearch.length ==20" class="more-box" @click="getMore()">
                  <img class="more-icon" src="@/assets/img/more.png" alt=""/>
                  <p>查看更多</p>
                </div>
              </el-select>
            </div>
          </div>
        </div>
      </swiper-slide>
    </swiper>
      <div class="wrapper">
        <div class="content">
          <!-- 轮播图 -->
          <div class="swiper-sedbox">
            <swiper class="swiper" :options="swiperOption" v-if="dataList.length > 0">
              <swiper-slide class="el-car-item" v-for="(list, index) in dataList" :key="index">
                <div class="swiper-box">
                  <div  class="top-img" @click="goPage(list.id)">
                    <img class="pic" :src="list.picturePath" alt=""/>
                    <p class="medium">{{list.name}}</p>
                  </div>
                  <!-- <p class="line"></p> -->
                </div>
              </swiper-slide>
              <div class="swiper-pagination" slot="pagination"></div>
            </swiper>
          </div>
          <!-- 点击咨询 -->
          <div class="consult-warpper">
            <div class="consult-con">
              <p class="title">立即咨询</p>
              <p class="answer">有问题，就会有答案</p>
              <el-button round >点击咨询 <i class="el-icon-right el-icon--right"></i></el-button>
            </div>
            <div class="product">
              <div class="smtproduct">
                <p class="smt-tit">SMT贴片厂</p>
                <p class="smt-model">弹性制造网络生产模式</p>
                <el-button round @click="goSMT">点击查看 <i class="el-icon-right el-icon--right"></i></el-button>
                <!-- <img class="smtpic" src="@/assets/img/smt.png" alt=""/> -->
              </div>
              <div class="pcdproduct" >
                <p class="smt-tit">PCB加工厂</p>
                <p class="smt-model">质量担保体系</p>
                <el-button round type="primary" @click="goPCB">点击查看 <i class="el-icon-right el-icon--right"></i></el-button>
              </div>
            </div>
          </div>
        </div>
      </div>
      <!-- 右侧定位 -->
      <div class="imglist">
        <p class="online">
          云FAE在线
        </p>
        <p class="online" @click="goNew()">
          新版 反馈
        </p>
        <p class="gotop" @click="goTop()">
          <img src="@/assets/img/top.png" alt=""/>
        </p>
      </div>
       <!-- 弹窗 -->
      <el-dialog :visible.sync="dialogFormVisible" title="问题反馈">
        <p class="title">请选择反馈问题的类型</p>
        <el-form :model="errorForm" :rules="rules" ref="errorForm">
          <el-form-item prop="types">
            <el-radio-group v-model="errorForm.types">
              <el-radio :label="item.value" v-for="item in option" :key="item.value">{{item.name}}</el-radio>
           
          </el-radio-group>
          </el-form-item>
          <el-form-item prop="text">
            <el-input type="textarea" placeholder="请输入详细问题，我们尽快为您解决。（必填）" v-model="errorForm.text"></el-input>
          </el-form-item>
          <el-form-item prop="images">
           <el-upload
              :action="upload_file_url"
              :headers="upHeaders"
              list-type="picture-card"
              :limit="6"
              :on-success="handleAvatarSuccess"
              :on-preview="handlePictureCardPreview"
              :on-remove="handleRemove">
              <i class="el-icon-plus"></i>
              <div class="el-upload__tip" slot="tip">最多可传6张图片</div>
            </el-upload>
            <el-dialog :visible.sync="dialogVisible">
              <img width="100%" :src=" errorForm.images" alt="">
            </el-dialog>
          </el-form-item>
        </el-form>
          <div class="dialog-footer">
          <el-button type="warning"  @click="goSumit('errorForm')">提交</el-button>
          </div>
      </el-dialog>
  </div>
</template>

<script>
  import { Swiper, SwiperSlide } from 'vue-awesome-swiper'
  import {getCarousel,getInFeedbackOption,getFeedbackSave,getBanner,querypartNumber} from "@/api/index.js"
  // import { getImgList } from '@/api/guide'
  export default {
    components: {
      Swiper,
      SwiperSlide
    },
    data() {
      return {
        partNumSearch: [
        ],
        modelInput: '',
        inputVal:'',
        timeout:  null,
        dialogFormVisible:false,//点击弹框
        dialogVisible: false,
        imgList:[],
        dataList:[],
        option:[],
        scrollTop: "",
        upload_file_url: process.env.VUE_APP_URL + '/api/v1/file/uploadImage?category=feedbcak', // 文件上传地址
        upHeaders:{
          'Authorization':"6a77998089b8467d83d2094a8011b02d"
        },
        flag_scroll:false,
        errorForm: {
          types: [],
          text: '',
          images:[],
        },
        rules:{
          text:[
            {required:true, message: '请输入详细问题，我们尽快为您解决。（必填）', trigger: 'blur'}
          ],
        },
        swiperTopOption:{
          // loop: true,
          autoplay:{
            delay:2000,
            disableOnInteraction:false,
          },
        },
        swiperOption: {
          loop: true,
          // centeredSlides: true,
          autoplay:{
            delay:2000,
            disableOnInteraction:false,
          },
          slidesPerView: 3,
          // spaceBetween: 30,
          pagination: {
            el: '.swiper-pagination',
            clickable: true
          }
        }
      }
    },
    created(){
      this.feedbackOption();
      this.getSwiperBanner();
      getCarousel().then(res=>{
        if(res.code == 200){
          this.dataList = res.result;
        }
      });
      
    },
    methods:{
      // 搜索
      filterMethod(val){
        this.inputVal = val;
        if(this.inputVal){
          let params={
            "partNumber": this.inputVal,
            "type":0,
          }
          querypartNumber(params).then(res=>{
            if(res.code == 200){
              this.partNumSearch = res.result;
            }
          })
        }
      },
      // 点击更多
      getMore(){
        console.log(this.inputVal,'222222');
        if(this.inputVal){
          let params={
            "partNumber": this.inputVal,
            "type":1,
          }
          querypartNumber(params).then(res=>{
            console.log(res,'quan');
            if(res.code == 200){
              this.partNumSearch = res.result;
            }
          })
        }
      },
      gosearch(){
        if(this.modelInput){
            this.$router.push({path:'/search',query:{
            partNum:this.modelInput
          }})
        }
      },
      getSwiperBanner(){
        getBanner().then(res=>{
          console.log(res.result);
          if(res.code == 200){
            this.imgList = res.result;
          }
        })
      },
      // 轮播图跳转
      goPage(id){
        console.log(id);
        this.$router.push({path:'device/'+id})
      },
      goSMT(){
        this.$router.push({
          name:'smt',
        })
        location.reload()
      },
      goPCB(){
        this.$router.push({
          name:'pcb',
        })
        location.reload()
      },
      goNew(){
        this.dialogFormVisible = true;
      },
      // 图片上传成功
      handleAvatarSuccess(res,file, fileList){
        let imageList = [];
        if(res.code == 200){
          fileList.map(function(item){
            imageList.push(item.response.result.absoluteUrl);
          }).join(",");
        this.errorForm.images = imageList;
        this.$message.success("图片上传成功")
        }
      },
      // 删除上传图片
      handleRemove(file, fileList) {
        let imagesList = [];
        let imageList = [];
        imagesList = fileList.filter(item => {return item.uid !== file.uid})
        console.log(imagesList)
        // 取出fileList中的imageUrl 用,拼接传给后端
        imagesList.map(function(item){
          imageList.push(item.response.result.absoluteUrl);
        }).join(",");
        this.errorForm.images = imageList;
        this.$message.success("图片已删除")
      },
      // 放大图片
      handlePictureCardPreview(file) {
        this.errorForm.images = file.url;
        this.dialogVisible = true;
      },
      // 信息反馈选项
      feedbackOption(){
        getInFeedbackOption().then(res=>{
          if(res.code == 200){
            this.option = res.result;
          }
        })
      },
      // 提交按钮
      goSumit(formName){
        this.$refs[formName].validate((valid) => {
          if (valid) {
            this.errorForm.types = [this.errorForm.types];
            console.log(this.errorForm);
            getFeedbackSave(this.errorForm).then(res=>{
              console.log(res);
              if(res.code == 200){
                // this.$refs[formName].resetFields();
                this.dialogFormVisible = false;
                  this.$message.success("提交成功")
              }else{
                this.$message.error("提交失败")
              }
            })
          } else {
            return false; 
          }
        });
      },
      // 返回顶部
      handleScroll(e) {
        // let scrolltop = document.body.scrollTop || document.documentElement.scrollTop || window.pageYOffset;
        this.scrollTop = e.target.scrollTop
        // console.log(scrolltop,'数据111111');
        // scrolltop > 100 ? (this.flag_scroll = true) : (this.flag_scroll = false);
      },
      goTop() {
        // let top = document.body.scrollTop || document.documentElement.scrollTop || window.pageYOffset;
        // console.log(this.scrollTop,'数据');
        // this.scrollTop = 0;
        document.getElementsByClassName('home-box')[0].scrollTop = 0;
      }
    },
    mounted(){
      window.addEventListener("scroll", this.handleScroll,true);
    },
    destroyed() {
      window.removeEventListener('scroll', this.handleScroll)
    },
  }
</script>
<style lang="less" scoped>
  @import './../../assets/style/edit.css';
  .home-box{
    width: 100%;
    height: auto;
    // overflow-y: scroll;
  }
  .imglist{
    position: fixed;
    right: 5%;
    top: 43%;
    z-index: 9999;
    .online{
      width: 60px;
      height: 60px;
      background: #4370F3;
      padding: 8px;
      border-radius: 4px;
      font-size: 14px;
      font-weight: 400;
      color: #FFFFFF;
      line-height: 24px;
      text-align: center;
      margin-bottom: 20px;
      cursor: pointer;
    }
    .gotop{
      width: 60px;
      height: 60px;
      background: #FFFFFF;
      border-radius: 4px;
      opacity: 0.66;
      border: 1px solid rgba(0,30,106,0.4);
      cursor: pointer;
      img{
        width: 28px;
        height: 28px;
        display: block;
        margin:16px auto;
      }
    }
    img{
      width: 90px;
      height: 90px;
      display: block;
      margin-bottom: 20px;
    }
  }
  .img-box{
    position: relative;
    img{
      width: 100%;
      height: 300px;
      display: block;
    }
  }
  .header{
    position: absolute;
    left: 19%;
    top: 13%;
    z-index: 99;
    .tit{
      font-size: 43px;
      font-weight: 600;
      color: #fff;
      line-height: 61px;
    }
    .tit1{
      font-size: 38px;
      font-weight: 300;
      color: #FFFFFF;
      line-height: 53px;
      letter-spacing: 40px;
      margin-bottom: 25px;
    }
    .search{
      width: 100%;
      .el-autocomplete{
        display: block;
      }
     
    }
    .el-input-group{
      width: 35%;
    }
   
  }
  .wrapper{
    background: #F7F8FA;
    .content{
      width: 62.5%;
      margin: auto;
      padding: 0 0 140px;
      .swiper-sedbox{
        width: 100%;
        background: #fff;
        position: relative;
        z-index: 2;
        margin-top: -17px;
        padding: 17px 80px 10px;
        .swiper-box{
          width: 100%;
          display: flex;
        }
        .line{
          width: 1px;
          height: 280px;
          background: #EEEEEE;
          margin:0 30px;
         
        }
      }
      .swiper-container{
        padding-bottom: 55px;
      }
      .el-car-item {
        .top-img{
          cursor: pointer;
          .pic{
            width: 280px;
            height:280px;
            display: block;
            margin:0 auto 20px;
          }
          p{
            font-size: 25px;
            font-weight: bold;
            text-align: center;
          }
        }
      }
      .consult-warpper{
        // background: #eee;
        // padding: 30px;
        // border-radius: 10px;
        display: flex;
        justify-content: space-between;
        margin-top: 100px;
        .consult-con{
          width: 33%;
          height: 500px;
          background-image: url('./../../assets/img/left.png');
          background-size: 100% 100%;
          padding: 40px 0 0 30px;
          .title{
            font-size: 24px;
            font-weight: 600;
            color: #191A24;
            line-height: 33px;
          }
          .answer{
            font-size: 16px;
            font-weight: 400;
            color: #666666;
            line-height: 22px;
            margin-bottom: 30px;
          }
          .el-button{
            background: #2569FF;
            border-color: #2569FF;
            color: #fff;
            font-size: 16px; 
            line-height: 22px;
          }
          .consultpic{
            height: 220px;
            display: block;
          }
          .consult-tit{
            font-size: 25px;
            color: #fff;
            background: #052D5E;
            padding: 10px 20px;
            border-radius: 25px;
            text-align: center;
          }
        }
        .product{
          width: 63%;
          display: flex;
          flex-direction: column;
          justify-content: space-between;
          .smtproduct{
            width: 100%;
            height: 230px;
            background-image: url('./../../assets/img/banner2.png');
            background-size: 100% 100%;
            padding:5% 10% 0 10%;
              .el-button{
                background: #0ECADE;  
                font-size: 16px;
                color: #fff;
                border-color: #0ECADE;
              }
            .smt-tit{
              font-size: 24px;
              font-weight: 600;
              color: #191A24;
              line-height: 33px;
              margin-bottom: 12px;
            }
            .smt-model{
              font-size: 16px;
              font-weight: 400;
              color: #666666;
              line-height: 22px;
              margin-bottom: 30px;
            }
          }
          .pcdproduct{
            width: 100%;
            height: 230px;
            background-image: url('./../../assets/img/banner3.png');
            background-size: 100% 100%;
            padding:5% 10% 0 10%;
            .smt-tit{
              font-size: 24px;
              font-weight: 600;
              color: #191A24;
              line-height: 33px;
              margin-bottom: 12px;
            }
            .smt-model{
              font-size: 16px;
              font-weight: 400;
              color: #666666;
              line-height: 22px;
              margin-bottom: 30px;
            }
          }
        }
      }
  
      
    }
    
    
  }

  .title{
    margin: 20px 0;
    font-size: 16px;
  }
  .tag-tit{
    margin: 10px 0 0 30px;
    cursor: pointer;
  }
  .more-box{
    display: flex;
    justify-content: center;
    align-items: center;
    font-size: 14px;
    font-weight: 400;
    color: #4370F3;
    line-height: 30px;
    cursor: pointer;
    .more-icon{
      width: 16px;
      height: 16px;
      display: block;
    }
  }

</style>